<template>
    <div style="width: 100%">
        <!--  头部搜索和创建按钮区域-->
        <el-row :gutter="50">
            <!--    搜索区域列-->
            <el-col :span="7">
                <el-input
                    clearable
                    @clear="getEnterpriseData"
                    @input="getEnterpriseData"
                    @focus="setPageNum"
                    @blur="setSearchType"
                    placeholder="请输入企业名称"
                    v-model="entName"
                    prefix-icon="el-icon-search"
                />
            </el-col>
            <!--    按钮区域列-->
            <el-col :span="2">
                <el-row>
                    <el-tooltip
                        effect="dark"
                        content="创建企业(岗位可以绑定))"
                        v-if = "!isDisable"
                        placement="top"
                    >
                        <el-button
                            type="primary"
                            icon="el-icon-plus"
                            :disabled="isDisable"
                            circle
                            @click="addEnterpriseDialogVisible = true"
                        />
                    </el-tooltip>
                </el-row>
            </el-col>
            <div>
                <el-radio-group
                    :disabled="isSearchType"
                    @change="getEnterpriseData"
                    v-model="searchType"
                    size="medium"
                >
                    <el-radio
                        label="全部"
                        border
                    >
                        全部
                    </el-radio>
                    <el-radio
                        label="优"
                        border
                    >
                        优
                    </el-radio>
                    <el-radio
                        label="良"
                        border
                    >
                        良
                    </el-radio>
                    <el-radio
                        label="中"
                        border
                    >
                        中
                    </el-radio>
                    <el-radio
                        label="差"
                        border
                    >
                        差
                    </el-radio>
                </el-radio-group>
            </div>
        </el-row>
        <!--  表格数据区域-->
        <el-table
            :data="tableData"
            border
            highlight-current-row
            stripe
            style="width: 100%"
            :row-style="rowStyle"
            :cell-style="cellStyle"
        >
            <el-table-column
                :key="table.prop"
                v-for="table in tableHeader"
                :label="table.label"
                :prop="table.prop"
                align="center"
                :width="table.width"
            />
            <el-table-column
                label="操作"
                align="center"
                fixed="right"
                width="180"
            >
                <!--        操作按钮区域的作用域插槽-->
                <template slot-scope="scope">
                    <el-tooltip
                        effect="dark"
                        content="企业岗位(可查看本企业所有岗位)"
                        placement="top"
                    >
                        <el-button
                            type="info"
                            icon="el-icon-view"
                            circle
                            @click="toPostDataShow(scope.row.entName)"
                        />
                    </el-tooltip>
                    <el-tooltip
                        effect="dark"
                        content="编辑企业(可编辑企业信息)"
                        v-if = "!isDisable"
                        placement="top"
                    >
                        <el-button
                            type="primary"
                            icon="el-icon-edit"
                            :disabled="!(userEndId === scope.row.entId) && !ent"
                            circle
                            @click="editDialogVisible1(scope.row)"
                        />
                    </el-tooltip>
                </template>
            </el-table-column>
        </el-table>
        <!--    分页器区域-->
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="page.current"
            :page-sizes="[10, 20, 35, 50]"
            :page-size="page.limit"
            layout="total, sizes, prev, pager, next, jumper"
            :total="page.total"
            background
        />
        <!--    添加企业对话框区域-->
        <el-dialog
            title="添加企业"
            :visible.sync="addEnterpriseDialogVisible"
            width="50%"
            :close-on-click-modal="false"
        >
            <el-form
                v-if="addEnterpriseDialogVisible"
                :model="addEnterpriseForm"
                :rules="addEnterpriseFormRules"
                ref="addEnterpriseFormRef"
                label-width="100px"
            >
                <el-form-item
                    label="企业名称"
                    prop="entName"
                >
                    <el-input v-model="addEnterpriseForm.entName"/>
                </el-form-item>
                <el-form-item
                    label="企业规模"
                    prop="scale"
                >
                    <el-radio-group
                        v-model="addEnterpriseForm.scale"
                        size="medium"
                    >
                        <el-radio
                            label="大型"
                            border
                        >
                            大型
                        </el-radio>
                        <el-radio
                            label="中型"
                            border
                        >
                            中型
                        </el-radio>
                        <el-radio
                            label="小型"
                            border
                        >
                            小型
                        </el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item
                    label="优质等级"
                    prop="grade"
                >
                    <el-radio-group
                        size="medium"
                        v-model="addEnterpriseForm.grade"
                    >
                        <el-radio
                            label="优"
                            border
                        >
                            优
                        </el-radio>
                        <el-radio
                            label="良"
                            border
                        >
                            良
                        </el-radio>
                        <el-radio
                            label="中"
                            border
                        >
                            中
                        </el-radio>
                        <el-radio
                            label="差"
                            border
                        >
                            差
                        </el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item
                    label="企业联系人"
                    prop="linkman"
                >
                    <el-input v-model="addEnterpriseForm.linkman"/>
                </el-form-item>
                <el-form-item
                    label="联系方式"
                    prop="phone"
                >
                    <el-input
                        type="textarea"
                        v-model="addEnterpriseForm.phone"
                    />
                </el-form-item>
                <el-form-item
                    label="企业地址"
                    prop="address"
                >
                    <el-input v-model="addEnterpriseForm.address"/>
                </el-form-item>
                <el-form-item
                    label="天眼查分值"
                    prop="score"
                >
                    <el-input
                        v-model="addEnterpriseForm.score"
                        onkeyup="value=value.replace(/[^\d]/g,'')"
                    />
                </el-form-item>
                <el-form-item
                    label="备注"
                    prop="remark"
                >
                    <el-input
                        type="textarea"
                        v-model="addEnterpriseForm.remark"
                    />
                </el-form-item>
            </el-form>
            <span
                slot="footer"
                class="dialog-footer"
            >
        <el-button @click="addEnterpriseDialogVisible = false">取 消</el-button>
        <el-button
            type="primary"
            @click="addEnterprise"
        >添加企业</el-button>
      </span>
        </el-dialog>

        <!--    编辑企业对话框区域-->
        <el-dialog
            title="编辑企业"
            :visible.sync="editEnterpriseDialogVisible"
            width="50%"
            :close-on-click-modal="false"
        >
            <el-form
                v-if="editEnterpriseDialogVisible"
                :model="editEnterpriseForm"
                :rules="editEnterpriseFormRules"
                ref="editEnterpriseFormRef"
                label-width="100px"
            >
                <el-form-item
                    label="企业名称"
                    prop="entName"
                >
                    <el-input v-model="editEnterpriseForm.entName"/>
                </el-form-item>
                <el-form-item
                    label="企业规模"
                    prop="scale"
                >
                    <el-radio-group
                        v-model="editEnterpriseForm.scale"
                        size="medium"
                    >
                        <el-radio
                            label="大型"
                            border
                        >
                            大型
                        </el-radio>
                        <el-radio
                            label="中型"
                            border
                        >
                            中型
                        </el-radio>
                        <el-radio
                            label="小型"
                            border
                        >
                            小型
                        </el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item
                    label="优质等级"
                    prop="grade"
                >
                    <el-radio-group
                        size="medium"
                        v-model="editEnterpriseForm.grade"
                    >
                        <el-radio
                            label="优"
                            border
                        >
                            优
                        </el-radio>
                        <el-radio
                            label="良"
                            border
                        >
                            良
                        </el-radio>
                        <el-radio
                            label="中"
                            border
                        >
                            中
                        </el-radio>
                        <el-radio
                            label="差"
                            border
                        >
                            差
                        </el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item
                    label="企业联系人"
                    prop="linkman"
                >
                    <el-input v-model="editEnterpriseForm.linkman"/>
                </el-form-item>
                <el-form-item
                    label="联系方式"
                    prop="phone"
                >
                    <el-input
                        type="textarea"
                        v-model="editEnterpriseForm.phone"
                    />
                </el-form-item>
                <el-form-item
                    label="企业地址"
                    prop="address"
                >
                    <el-input v-model="editEnterpriseForm.address"/>
                </el-form-item>
                <el-form-item
                    label="天眼查分值"
                    prop="score"
                >
                    <el-input
                        v-model="editEnterpriseForm.score"
                        onkeyup="value=value.replace(/[^\d]/g,'')"
                    />
                </el-form-item>
                <el-form-item
                    label="备注"
                    prop="remark"
                >
                    <el-input
                        type="textarea"
                        v-model="editEnterpriseForm.remark"
                    />
                </el-form-item>
            </el-form>
            <span
                slot="footer"
                class="dialog-footer"
            >
        <el-button @click="editEnterpriseDialogVisible = false">取 消</el-button>
        <el-button
            type="primary"
            @click="editEnterprise"
        >编辑企业</el-button>
      </span>
        </el-dialog>

        <!--    删除企业对话框-->
        <el-dialog
            title="删除企业"
            :visible.sync="deleteEnterpriseDialogVisible"
            width="50%"
            :close-on-click-modal="false"
        >
            <span>确认删除吗?</span>
            <span
                slot="footer"
                class="dialog-footer"
            >
        <el-button @click="deleteEnterpriseDialogVisible = false">取 消</el-button>
        <el-button
            type="primary"
            @click="deleteEnterprise"
        >删除企业</el-button>
      </span>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: 'EnterpriseManage',
        data () {
            return {
                /** 数据表格 */
                // 数据表格数据绑定
                isSearchType: false,
                isDisable: false,
                ent:false,
                user: JSON.parse(window.sessionStorage.getItem('user')),
                entName: '',
                searchType: '全部',
                page: {
                    current: 1,
                    limit: 10,
                    total: 0
                },
                isEdit : true,
                // 数据表格数据
                tableData: [],
                // 总共多少条数据
                total: 0,
                tableHeader: [
                    { label: '企业编号', prop: 'entId', width: 100 },
                    { label: '企业名称', prop: 'entName', width: 200 },
                    { label: '企业规模', prop: 'scale', width: 100 },
                    { label: '优质等级', prop: 'grade', width: 120 },
                    { label: '联系人姓名', prop: 'linkman', width: 100 },
                    { label: '联系方式', prop: 'phone', width: 200 },
                    { label: '企业地址', prop: 'address', width: 300 },
                    { label: '天眼查分数', prop: 'score', width: 100 },
                    { label: '备注', prop: 'remark', width: 300 },
                    { label: '岗位数量', prop: 'postNum' },
                    { label: '添加日期', prop: 'createTime', width: 150 }
                ],
                // 添加企业表单是否显示
                addEnterpriseDialogVisible: false,
                // 添加企业表单
                addEnterpriseForm: {
                    entName: '',
                    scale: '',
                    grade: '',
                    linkman: '',
                    phone: '',
                    address: '',
                    score: '',
                    remark: ''
                },
                /** 添加企业表单验证相关配置 */
                addEnterpriseFormRules: {
                    entName: [
                        {
                            required: true,
                            message: '请输入企业名称',
                            trigger: 'blur'
                        },
                        {
                            min: 4,
                            max: 30,
                            message: '长度在 4 到 30 个字符',
                            trigger: 'blur'
                        }
                    ],
                    scale: [
                        {
                            required: true,
                            message: '请选择企业规模',
                            trigger: 'blur'
                        }
                    ],
                    grade: [
                        {
                            required: true,
                            message: '请选择企业优质等级',
                            trigger: 'blur'
                        }
                    ],
                    linkman: [
                        {
                            required: true,
                            message: '请输入企业联系人姓名',
                            trigger: 'blur'
                        },
                        {
                            min: 2,
                            max: 8,
                            message: '长度在 2 到 8 个字符',
                            trigger: 'blur'
                        }
                    ],
                    phone: [
                        {
                            required: true,
                            message: '请输入联系方式信息',
                            trigger: 'blur'
                        },
                        {
                            min: 4,
                            max: 100,
                            message: '长度在 4 到 100 个字符',
                            trigger: 'blur'
                        }
                    ],
                    address: [
                        {
                            required: true,
                            message: '请输入企业地址',
                            trigger: 'blur'
                        },
                        {
                            min: 2,
                            max: 400,
                            message: '长度在 2 到 400 个字符',
                            trigger: 'blur'
                        }
                    ],
                    score: [
                        {
                            required: true,
                            message: '请输入企业天眼查分数',
                            trigger: 'blur'
                        },
                        {
                            min: 2,
                            max: 10,
                            message: '长度在 2 到 10 个字符',
                            trigger: 'blur'
                        }
                    ]
                },
                // 编辑企业表单是否显示
                editEnterpriseDialogVisible: false,
                // 编辑企业表单
                editEnterpriseForm: {
                    entId: '',
                    entName: '',
                    scale: '',
                    grade: '',
                    linkman: '',
                    phone: '',
                    address: '',
                    score: '',
                    remark: ''
                },
                /** 编辑企业表单验证相关配置 */
                editEnterpriseFormRules: {
                    entName: [
                        {
                            required: true,
                            message: '请输入企业名称',
                            trigger: 'blur'
                        },
                        {
                            min: 4,
                            max: 30,
                            message: '长度在 4 到 30 个字符',
                            trigger: 'blur'
                        }
                    ],
                    scale: [
                        {
                            required: true,
                            message: '请选择企业规模',
                            trigger: 'blur'
                        }
                    ],
                    grade: [
                        {
                            required: true,
                            message: '请选择企业优质等级',
                            trigger: 'blur'
                        }
                    ],
                    linkman: [
                        {
                            required: true,
                            message: '请输入企业联系人姓名',
                            trigger: 'blur'
                        },
                        {
                            min: 2,
                            max: 8,
                            message: '长度在 2 到 8 个字符',
                            trigger: 'blur'
                        }
                    ],
                    phone: [
                        {
                            required: true,
                            message: '请输入联系方式信息',
                            trigger: 'blur'
                        },
                        {
                            min: 4,
                            max: 100,
                            message: '长度在 4 到 100 个字符',
                            trigger: 'blur'
                        }
                    ],
                    address: [
                        {
                            required: true,
                            message: '请输入企业地址',
                            trigger: 'blur'
                        },
                        {
                            min: 2,
                            max: 400,
                            message: '长度在 2 到 400 个字符',
                            trigger: 'blur'
                        }
                    ],
                    score: [
                        {
                            required: true,
                            message: '请输入企业天眼查分数',
                            trigger: 'blur'
                        }
                    ]
                },
                // 删除企业对话框是否显示
                deleteEnterpriseDialogVisible: false,
                userEndId:""
            }
        },
        /** 生命周期函数 */
        created () {
            this.getEntId();
            let user = this.user;
            if (user.type == "2"){
                this.isDisable = true;
            }
            if (user.type === "0"){
                this.ent = true;
            }
            const entName = this.$route.query.entName
            if (entName !== undefined && entName !== '') {
                this.entName = entName
            }
            this.getEnterpriseData()
        },
        /** 事件处理函数 */
        methods: {
            /** 添加企业 */
            addEnterprise () {
                let self = this
                let entName = self.addEnterpriseForm.entName
                let scale = self.addEnterpriseForm.scale
                let grade = self.addEnterpriseForm.grade
                let linkman = self.addEnterpriseForm.linkman
                let phone = self.addEnterpriseForm.phone
                let address = self.addEnterpriseForm.address
                let score = self.addEnterpriseForm.score
                let remark = self.addEnterpriseForm.remark
                this.$refs.addEnterpriseFormRef.validate(async valid => {
                    if (valid) {
                        self.utils.sendReq({
                            queryUrl: '/enterprise/add',
                            req: {
                                method: 'post',
                                data: {
                                    'entName': entName,
                                    'scale': scale,
                                    'grade': grade,
                                    'linkman': linkman,
                                    'phone': phone,
                                    'address': address,
                                    'score': score,
                                    'remark': remark
                                },
                                success: function (req) {
                                    if (req.data.code === 200) {
                                        self.$message({
                                            message: req.data.msg,
                                            type: 'success',
                                            showClose: true,
                                            center: true
                                        })
                                        self.getEnterpriseData()
                                        self.addEnterpriseDialogVisible = false
                                    }
                                    if (req.data.code === 400) {
                                        self.$message({
                                            message: req.data.msg,
                                            type: 'error',
                                            showClose: true,
                                            center: true
                                        })
                                    }
                                },
                                error: function () {
                                    self.$message({
                                        message: '接口请求失败！',
                                        type: 'error',
                                        showClose: true,
                                        center: true
                                    })
                                }
                            }
                        })
                    }
                })
            },

            /** 编辑企业对话框 */
            editDialogVisible1 (enterpriseData) {
                for (const key in enterpriseData) {
                    this.editEnterpriseForm[key] = enterpriseData[key]
                }
                this.editEnterpriseDialogVisible = true
            },
            /** 编辑企业 */
            editEnterprise () {
                let self = this;
                let data = {};
                data.entId = self.editEnterpriseForm.entId
                data.entName = self.editEnterpriseForm.entName
                data.scale = self.editEnterpriseForm.scale
                data.grade = self.editEnterpriseForm.grade
                data.linkman = self.editEnterpriseForm.linkman
                data.phone = self.editEnterpriseForm.phone
                data.address = self.editEnterpriseForm.address
                data.score = self.editEnterpriseForm.score
                data.remark = self.editEnterpriseForm.remark
                self.$refs.editEnterpriseFormRef.validate(async valid => {
                    if (valid) {
                        this.utils.sendReq({
                            queryUrl: 'enterprise/update',
                            req: {
                                data: data,
                                method: 'post',
                                success: function (req) {
                                    if (req.data.code === 200) {
                                        self.$message({
                                            message: req.data.msg,
                                            type: 'success',
                                            showClose: true,
                                            center: true
                                        })
                                        self.getEnterpriseData()
                                        self.editEnterpriseDialogVisible = false
                                    }
                                    if (req.data.code === 400) {
                                        self.$message({
                                            message: req.data.msg,
                                            type: 'error',
                                            showClose: true,
                                            center: true
                                        })
                                    }
                                },
                                error: function () {
                                    self.$message({
                                        message: '接口请求失败！',
                                        type: 'error',
                                        showClose: true,
                                        center: true
                                    })
                                }
                            }
                        })
                    }
                })
            },
            getEntId(){
                let self = this;
                self.utils.sendReq({
                    queryUrl:'/enterpriseUser/getEntId',
                    req:{
                        method:'get',
                        success:function (req) {
                            if (req.data.code == 200){
                                self.userEndId = req.data.data;
                            }
                        }
                    }
                })
            },

            /** 获取企业数据 */
            getEnterpriseData () {
                let self = this
                let entName = self.entName
                let searchType = self.searchType
                if (searchType === '全部') {
                    searchType = ''
                }
                let current = self.page.current
                let limit = self.page.limit
                let enterpriseVo = []
                self.utils.sendReq({
                    queryUrl: '/enterprise/query?current=' + current + '&limit=' + limit
                        + '&entName=' + entName + '&grade=' + searchType,
                    req: {
                        method: 'get',
                        success: function (req) {
                            if (req.data.code === 200) {
                                self.page.total = req.data.data.page.rows
                                for (let i in req.data.data.enterpriseVos) {
                                    enterpriseVo.push(req.data.data.enterpriseVos[i])
                                }
                                self.tableData = enterpriseVo
                            }
                        }
                    }
                })
            },

            /** 跳转到岗位数据页面并显示本企业对应的岗位 */
            toPostDataShow (enterpriseName) {
                this.$router.push({
                    path: '/admin/postManage',
                    query: {
                        entName: enterpriseName
                    }
                })
            },
            setSearchType () {
                this.isSearchType = false
            },
            /** 修复当用户在大于1的分页进行数据搜索没有返回值的问题 */
            setPageNum () {
                this.page.current = 1
                this.isSearchType = true
                this.searchType = '全部'
                this.getEnterpriseData()
            },
            /** 监听每页显示多少数据的改变 */
            handleSizeChange (newSize) {
                this.page.limit = newSize
                this.getEnterpriseData()
            },
            /** 监听页码的改变 */
            handleCurrentChange (newPage) {
                this.page.current = newPage
                this.getEnterpriseData()
            },
            rowStyle (row, rowIndex) {
                return 'height : 35px'
            },
            cellStyle () {
                return 'padding : 2px'
            }
        }
    }
</script>

<style lang="less" scoped>
    .input-select {
        width: 130px;
    }

    .el-table {
        align-items: center;
        margin-top: 25px;
    }

    .el-pagination {
        margin-top: 25px;
    }
</style>
